<template>
  <div id="GlobalHeader">
    <a-menu style="height:100%;background-color: rgba(255, 255, 255, 0);" v-model:selectedKeys="current" mode="horizontal"  @click="doMenuItemClick">
      <a-menu-item key="0" disabled>
        <div class="titleImg" @click="backToHome">
          <img style="height: 60%" src="../assets/logo-1.png"/>
          <div class="title">网络抗毁模拟系统</div>
        </div>
      </a-menu-item>
      <a-menu-item v-for="r in items" :key="r.path" >
          <div  class="menuItem" >
            {{r.name}}
          </div>
      </a-menu-item>
    </a-menu>

  </div>

</template>

<script setup>
import {onMounted, ref} from 'vue';
import routes from '../router/routes';
import {useRouter, useRoute} from "vue-router";
import {message} from "ant-design-vue";
import useProject from "../store/project.js";
import {storeToRefs} from "pinia";

const projectStore = useProject();
const {currentProject} = storeToRefs(projectStore);

const router = useRouter();
const route = useRoute();

const current = ref([route.path]);

onMounted(
    () => {
      message.success("hello 欢迎来到我的项目");
      router.beforeEach((to, from, next) => {
        current.value = [to.path];
        next();
      })
    }

)
// console.log("routes", routes)
const items = ref(routes.filter((i)=>{
  console.log(i)
  return  ! i.meta || ! i.meta.hideInMenu
}));
const doMenuItemClick= (key) => {
  console.log("doMenuItemClick", key.key)
  // console.log(router)
  router.push({
    path: key.key,
    // path: key.key,
  });
}
const backToHome = () => {
  currentProject.value.name=null
  router.push({
    path: '/',
    // path: key.key,
  });
}
</script>

<style scoped>
#GlobalHeader {
  /*box-shadow: #eee 1px 5px;*/
  /*margin-bottom: 16px;*/
  padding: 0px 20px;
  height: 100%;

}

.menuItem {
  font-size: 20px;
}

.titleImg {
  height: 72px;
  display: flex;
  align-items: center;
}

.title {
  color: #015a60;
  font-size: 24px;
  font-weight: bolder;
  margin-right: 4px;
}
</style>